<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude">

  <xi:include href="master.html" />
  <xi:include href="diver/buddies.html" />

<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type" py:replace="''"/>
  <script type="text/javascript" src="/js/jquery-tooltip/jquery.tooltip.min.js" />
  <link rel="stylesheet" href="/js/jquery-tooltip/jquery.tooltip.css" />
    
  <title>ediver.org</title>
</head>
<body>
				<div style="height: 500px;width:700px;margin: auto;">
<div style="height: 300px;width:300px;position: absolute;">
<div id="drophere" class="ui-widget-content ui-corner-all" style="width: 100%;height: 100%;overflow: auto;"></div> 
</div>
<div id="buddies_div" style="width:300px;float: right ;display: inline;">
	<div style="height: 450px;" id="accordion">
	<ul>
	<li><a href="#buddies">Buddies</a></li>
    <li><a href="#friends">Friends</a></li>
	<li><a href="#newBuddy">New</a></li>
    <li><a href="#my2">Search</a></li>
    </ul>
    <div id="friends" style="padding:0px;;height: 400px;overflow: auto ">
    ${displayDiverIcon('Maciej Kaniewski','friends')}
    ${displayDiverIcon('Ala Ma kota','friends')}
    ${displayDiverIcon('kot ma ale','friends')}
	</div>
    <div id="buddies" style="padding:0px;;height: 400px;overflow: auto ">
	${displayDiverIcon('1','buddies')}
	${displayDiverIcon('2','buddies')}
	${displayDiverIcon('3','buddies')}
	</div>
    <div id="my2"><input id="search_field" style="" title="search for users"/></div>
    <div id="newBuddy">
    	<div class="ui-widget-content ui-corner-top">
    	<h2 class="ui-widget-header" style="text-align: center;">Basic Details</h2>
    	<div><label for="newBuddyName">Name : </label><input id="newBuddyName"/></div>
    	<div><label for="newBuddy">Surname : </label><input id="newBuddy"/></div>
    	<div><label for="newBudd">Nick : </label><input id="newBudd"/></div>
    	<button onclick="$('#newBuddy_address').toggle('blind',{},500) " >Address</button>
    	<button onclick="$('#newBuddy_more').toggle('blind',{},500) " >More ...</button>
    	</div>
    	<div id="newBuddy_address" class="ui-widget-content ui-helper-hidden">
    	<h2 class="ui-widget-header" style="text-align: center;">Address</h2>
    	<div><label for="newBuddyName">Name : </label><input id="newBuddyName"/></div>
    	<div><label for="newBuddy">Name : </label><input id="newBuddy"/></div>
    	<div><label for="newBudd">Name : </label><input id="newBudd"/></div>
    	</div>
    	<div id="newBuddy_more" class="ui-widget-content ui-helper-hidden">
    	<h2 class="ui-widget-header" style="text-align: center;">More Details</h2>
    	<div><label for="newBuddyName">Name : </label><input id="newBuddyName"/></div>
    	<div><label for="newBuddy">Name : </label><input id="newBuddy"/></div>
    	<div><label for="newBudd">Name : </label><input id="newBudd"/></div>
    	</div>
    	<div id="newBuddy_add" class="ui-widget-content ui-corner-bottom">
    	<button id="addButton" onclick="$('#newBuddy_address').hide();$('#newBuddy_more').hide();newBuddy()" >Add</button>
    	<img id="spinner" src="/images/spinner.gif" alt="spinner" class="ui-helper-hidden" />
    	</div>
    	<div id='newBuddy'>
	    	
    	</div>
    </div>
</div> 
	
	
	
</div>
</div>

<script type="text/javascript">
$(function() {
	$('#tabs').tabs();
	$("#accordion").tabs();
	$('#search_field').tooltip()
	$('#drophere').droppable( {
		accept : '.draggableItem',
		activeClass : 'ui-state-highlight',
		drop : function(ev, ui) {addBuddy(ui.draggable);}
	});
	
	$('#buddies_div').droppable( {
		accept : '.buddyDragable',
		activeClass : 'ui-state-highlight',
		drop : function(ev, ui) {returnBuddy(ui.draggable);}
	});
	$('.draggableItem').draggable(
			{
				revert:'invalid',
				helper: 'clone',
				cursor : 'move'  }
			)
});
function addBuddy(item) {
	item.fadeOut(function() {
		item.appendTo('#drophere').fadeIn()
		item.removeClass('draggableItem')
		item.addClass('buddyDragable')
		// action here
	});
}

function returnBuddy(item) {
	item.fadeOut(function() {
		itemData = eval($('.widget-data',item).html());
		item.appendTo('#'+itemData.type).fadeIn()
		item.removeClass('buddyDragable')
		item.addClass('draggableItem')
		// action here
	});
}
function newBuddy(){
	//add to database
	$('#spinner').show();
	$.get('/diver/buddyIcon',{},function(data){
		$('#newBuddy').append($('.draggableItem',data))
		$('.draggableItem').draggable(
			{
				revert:'invalid',
				helper: 'clone',
				cursor : 'move'  }
			)
		$('#spinner').hide();
		},'xhtml')
	}
	
</script>
</body>
</html>
